:root{
    --bg-yellow: #fffad7;
    --bg-blue: #A4D7FC;
    --bg-pink: #ffe5f8;
    --hover-bg-yellow: #fedb00;
    --hover-bg-blue: #91cdfa;
    --hover-bg-pink: #f79bde;
}

::-moz-selection {
    background: #babaff;
}

::selection {
    background: #babaff;
}
.z-highlight-select{
    background: #babaff;
}
zh{
    display: inline;
}
.zh-color{
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 100%;
    border: 1px solid #606060;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .06s ease-in-out;
}
.zh-color:hover{
    box-shadow: 0 0 0 1.5px #606060 inset;
}
.zh-color.active{
    border-color: #6e6e6e;
}
.zh-color.yellow{background: var(--bg-yellow)}
.zh-color.yellow.select,
.zh-color.yellow:hover{background: var(--hover-bg-yellow)}

.zh-color.blue{background: var(--bg-blue)}
.zh-color.blue.select,
.zh-color.blue:hover{background: var(--hover-bg-blue)}

.zh-color.pink{background: var(--bg-pink)}
.zh-color.pink.select,
.zh-color.pink:hover{background: var(--hover-bg-pink)}

.z-highlight-dialog{
    position: absolute;
    bottom: 0;
    width: 260px;
    height: 48px;
    background: rgb(255, 255, 255);
    align-items: center;
    justify-content: space-between;
    padding: 0 7px;
    box-shadow: 0 1px 4px 1px #cdcdcd;
    border-radius: 50px;
    display: none;
}
.highlight-underline{
    width: 32px;
    height: 32px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.highlight-underline > img{
    width: 77%;
}
.highlight-underline:after{
    content: '';
    position: absolute;
}
.zh-color.delete:hover{
    background-color: rgb(240, 240, 240);
}
.z-highlight.yellow{
    background-color: var(--bg-yellow);
}
.z-highlight.yellow.active{
    background-color: var(--hover-bg-yellow);
}